Full Stack JavaScript Developer | Educator | Journalist

Coding Falcons sample work from 4th and 8th graders

Added on by Madeline Stevens.

These single page applications (SPA) were built using HTML, CSS, and JavaScript during the Coding Falcons summer camp in 2018 . Three hours each day for four days, with presentations happening at the end of the week.

This was so fun! And they did soooooo great on their presentations last summer! I love how web development always gets people so excited to present their work and more importantly what they learned about learning.

IMG_4130.JPG
IMG_4131.JPG
IMG_4132.JPG

Help fund STEM programs- Rally for ChickTech!!!

Added on by Madeline Stevens.

On Nov. 17th and 18th of 2018 ChickTech held a kickoff to celebrate the start of their high school program year. There will be a high school event once a month going forward. 

ChickTech envisions a safe, inclusive, and innovative technology future that includes equal pay, participation, and treatment of women. They are dedicated to retaining women in the technology workforce and increasing the number of women and girls pursuing technology-based careers.

They facilitate hands-on technology-centric events and programs to empower, support, and increase the confidence of women and girls. Through their events, they build community, empower participants to see themselves as leaders, and provide networking and mentoring opportunities in the rapidly growing high tech industry.

IMPORTANT:  ChickTech has lost it's largest funding partner - Adobe. Adobe made up about 35% of ChickTech’s national budget. Now they’re inviting everyone to #RallyforChickTech by contributing to the fundtraiser. This national campaign is hoping to raise 100k of bridge funding. 

(All photos are taken by Ivette Cortez, I did not attend this event.)

Screen Shot 2019-01-29 at 8.42.07 PM.png

The amazing people behind the scenes of these Seattle events are the Youth Program Manager, Ivette Cortez, and team leads, Val Najera and Kat Radich.  

ChickTech High School kickoff held last year in Seattle:

* Hosted by Industrious Seattle (@industriousHQ on Twitter)  

* Sixty-three HS youth (girls, cisgender, non-binary)

* Five workshops inc, VR, Architecture & Cybersecurity

IMG_5927.HEIC.jpeg
IMG_5899.HEIC.jpg
IMG_5907.HEIC.jpeg
IMG_5917.HEIC.jpeg
IMG_5908.HEIC.jpeg
IMG_5920.HEIC.jpeg




IF ME open source project- React and Ruby

Added on by Madeline Stevens.

IF ME seemed like one of the most beginner friendly open source projects out there and that turned out to be true, I requested to become part of their community, they then send an invite to their private slack channel where you can immediately start asking questions to get their code base up and running on your machine.

  1. The task- Add missing alt tags and aria-label to links and images.

  2. The GitHub open issue

  3. React Accessibility docs

  4. IF ME site

The app is built using Ruby and React. It looks like someone else already added some alt tags and ARIA elements.

However, I ran aXe on IF ME and it found that there were missing ARIA labels on the drop down used for switching between different site languages. I’m going to see if an ARIA label is really needed here or not.

Screenshot of the open issue.

Screenshot of the open issue.

Screen Shot 2018-10-15 at 6.38.14 PM.png
Screen Shot 2018-10-15 at 6.38.23 PM.png
Screenshot of aXe informing me that this drop down menu (see red arrow) full of links doesn't include any ARIA labels.

Screenshot of aXe informing me that this drop down menu (see red arrow) full of links doesn't include any ARIA labels.

August and September meetups

Added on by Madeline Stevens.
  1. I learned a ton at a recent Inclusive Design meetup I attended two days ago (Sept. 25) at Adobe. I had to laugh at how a highlight of the night for me was a back and forth between presenter and attendee regarding the use of image carousels. The attendee does not think they should ever be used, the presenter agreed but said that if you need to use one here are his tips. That’s been the focus of so much of my accessibility work! This almost validated my battle with making that sucker accessible these past few months!

  2. My friend Jacob was willing to share his top accessibility defects at July’s A11y meetup (focused on the CPAAC certification) at Blink. He mentioned how he relies on labels. He needs to be able to use the ‘H’ key to jump through each header (and additionally the G key-every graphic, T key- every table, B key- every button).

  3.  There was a great panel of women from Coffee Meets Bagel at September’s PuPPy meetup (Phython) at Juno. There was also a group of graduates from the data science program at Galvanize presenting their individual final projects.

My first SheCodesNow workshop facilitation (7/26/18)

Added on by Madeline Stevens.
IMG_6800.jpg

Ivette invited me to facilitate a SheCodesNow intro to HTML/CSS workshop hosted at our alma mater, Code Fellows, back in July. The workshop was 1.5 hours, so Ivette and I decided using codepen would be ideal for that short window of time. Next time I will want to use a desktop editor. 

Oh, and the two questions that SheCodesNow likes to present to their attendees: 

1. Do you like learning new things?

2. Can you use google? 

Accessibility in tech: Section 508, ARIA and WCAG

Added on by Madeline Stevens.

These are the three big accessibility topics that I've been studying in preparation for the CPACC certification from IAAP. 


WHAT IS SECTION 508?

  • Section 508 requires federal agencies to make any electronic info accessible to a person with disabilities following technical standards and performance criteria.

  • Section 508 is an amendment that was added in 1998 to the Rehabilitation Act. Before 1998 the Rehabilitation Act just covered access to buildings.

  • This amendment requires that we make our documents compatible with assistive technologies like screen readers and the magnifiers that people may use to access them.

  • From a technology point of view Section 508 covers just about everything- software, computers, information kiosks, websites, copiers, calculators. It does not cover things like lab equipment.

Resource- Nasa’s Section 508 Awareness Video


WHAT IS ARIA?

 Web Accessibility Initiative – Accessible Rich Internet Applications

WAI-ARIA is a set of attributes that define ways to make Web content and Web applications more accessible to people with disabilities. These attributes can be added to any markup, but is especially suited for HTML.

Resource- MDN ARIA docs

Here’s a quick example: 

You can also watch me explain the following example here on youtube

I created a site with an image carousel, the carousel has left and right arrows so the user can click through the images that make up my carousel. (Note: I now know that carousels are a nightmare for anyone, but especially so for screen readers.)

However, in my HTML code there’s initially no information for a screenreader regarding those left/right arrows. A low vision or blind user would get to that part of my site and the screenreader would just read the word “link.” 

I can add an ARIA label attribute to each arrow with a semantically meaningful blurb for the screenreader to interpret. I decided my ARIA-label would read, “Click to go to left carousel image.” So much more informative than “link.”

Before ARIA (no ARIA attributes on lines 137 or 140):

Screen Shot 2018-08-13 at 4.51.41 PM.png

After adding the following ARIA to line 137 and 140---> aria-label="click to go to left carousel image"

Screen Shot 2018-08-13 at 4.50.13 PM.png

Here is a great resource to see most if not all ARIA attributes. Disclaimer, this cheatsheet can be overwhelming and may not even be helpful to me right now. But paired with other resources maybe it can be.  

Accessibility Web Mapping (ARIA, WCAG, 508)

ARIA attributes have three different types:

  1. Roles (I.e.- informing screen readers and users that something is a search bar)

  2. Properties (I.e.- informing screen readers and users that a text field is required before hitting submit, semantically labeling a left/right arrow within an image carousel)

  3. States (I.e.- informing screen readers and users that a checkbox is checked by default)

My routine right now is to rely on the aXe Chrome extension to point out defects and to suggest the correct solution(s). Then I test that solution with VoiceOver to make sure it really works.


What is WCAG? 

Web Content Accessibility Guidelines (WCAG)

  • Web Content Accessibility Guidelines (WCAG) are part of a series of web accessibility guidelines published by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C).

  • WCAG 2.0 and WCAG 2.1 are stable, reference-able technical standards.

  • They have 12-13 guidelines (https://www.w3.org/TR/WCAG20/) that are organized under

  • Four principles:

    • 1. Perceivable- This means that users must be able to perceive the information being presented (it can't be invisible to all of their senses).

    • 2. Operable- This means people must be able to use the computer by typing or by voice.

    • 3. Understandable- This means clear and simple language must be provided.

    • 4. Robust- Users can utilize different assistive technologies.

For each guideline, there are testable success criteria, which are at three levels: A, AA, and AAA. (I.e. with AAA you need to supply sign language interpretation which is difficult for some companies).


It took me a hot minute to find a quick list of the 12 guidelines from this person-

4 Perceivable Principle

  1. Provide text alternative

  2. Provide alternative for time-based media

  3. Provided alternative format

  4. Make it easier for users to see and hear content - separate the foreground from the background

4 Operable Principle

  1. Make all functionality available for keyboard

  2. Provide users with enough time to read and use content

  3. Do not design content in a way that is known to cause seizures

  4. Provide ways to help users navigate (<nav><sitemap>, find content (search, skip to content) and determine where they are (proper page title)

3 Understandable Principles

  1. Make content readable and understandable.

  2. Make web pages appear and operate in predictable ways (just good design)

  3. Help users avoid and correct mistakes

1 Robust Principle

  1. Maximize compatibility with current and future user agents including assertive technologies. This can be accomplished by implementing technology in the following order: HTML, CSS, Javascript.

Inclusive Design in Game Development, 7/17/18

Added on by Madeline Stevens.

This was an a11y Seattle meetup focused on Inclusive Design in Game Development. Hosted by Microsoft's Bryce and Evelyn in their Inclusive Tech/Gaming lab in Redmond, Washington. 

IMG_6588.jpg
IMG_6590.jpg
IMG_6587.jpg
Evelyn and Bryce demoing Narrator on xbox and the xbox adaptive controller with copilot.&nbsp;

Evelyn and Bryce demoing Narrator on xbox and the xbox adaptive controller with copilot. 

Thanks for being my display person, Omar!&nbsp;

Thanks for being my display person, Omar! 

IMG_6596.jpg
IMG_6598.jpg
Good to meet you Aaron (Blink)&nbsp;and Tohm (Microsoft) and Marcy.&nbsp;

Good to meet you Aaron (Blink) and Tohm (Microsoft) and Marcy. 

Cyber Security Summit, Seattle, 7/19/18

Added on by Madeline Stevens.

The tickets to this event are $350, but I was able to get a free pass by simply being a follower of Cyber Security Summit on LinkedIn. The event was from 7:45-4:30pm, there were over 500 attendees and it was held at The Westin in downtown Seattle. Key take aways:

1) Encrypt EVERYTHING!

2) There is no need to buy ransomware.

3) E-mail is usually the culprit when it comest to security breaches.

4) Just make sure you're educating your users to detect and report odd emails they may receive. At Apple we would go through mandatory anti-phishing trainings at least every quarter, which meant we just clicked through a few slides with info on our own time.  

IMG_6606.jpg
IMG_6613.jpg
IMG_6620.jpg
IMG_6626.jpg
IMG_6633.jpg
IMG_6641.jpg
IMG_6648.jpg
IMG_6646.jpg

Capitol Hill Tool Library in Seattle

Added on by Madeline Stevens.

At Write/Speak/Code I met Gina who volunteers at the tool library and is trying to spread the word that it exists and they need more volunteers in order to increase their open hours. I went a week ago and met Aaron Wilson, Founder of Tekhaven Development Center, who told me about his plans to create a vision system("sonar for the blind") for his electric wheelchair. 

IMG_5274.jpg
IMG_5273.jpg
IMG_5281.jpg
IMG_5280.jpg
IMG_5283.jpg

ARIA accessibility resources

Added on by Madeline Stevens.

A big focus of mine is accessibility in tech. This stems from working with people at the Apple store and experiencing how frustrating it is when an update happens automatically and it erases all customized settings a person who is blind has spent time perfecting. Or when a screenreader isn't able to deliver semantic tag or role readings because a website doesn't include them. 

ARIA is a set of html attributes designed to offer semantic info for screen readers. So there are two sites and a video below that have been helpful to me. I'm still studying but needed a place to dump the good resources I've come across. 

Long term teacher subbing! Science and history classes, 4-8th grade!

Added on by Madeline Stevens.
IMG_4927.jpg
4th grade volcano flashcards.

4th grade volcano flashcards.

Prepping for 6th grade's water filtration lab over the weekend.

Prepping for 6th grade's water filtration lab over the weekend.

8th grade's acid/base cabbage juice lab.

8th grade's acid/base cabbage juice lab.

IMG_5060.jpg
Prepping for cabbage juice lab over the weekend.

Prepping for cabbage juice lab over the weekend.

IMG_5067.jpg
Acid/base cabbage juice indicator lab with 8th grade!

Acid/base cabbage juice indicator lab with 8th grade!

6th grade flint water crisis readings.

6th grade flint water crisis readings.

Prepping 6th grade for Lynsey's cure for cancer talk on friday by asking them to write down questions they have about cancer.

Prepping 6th grade for Lynsey's cure for cancer talk on friday by asking them to write down questions they have about cancer.

IMG_4965.jpg
IMG_5038.jpg
IMG_5107.jpg
Lynsey getting into her garb.

Lynsey getting into her garb.

Holy Family Bilingual School has parents sign photo release forms so that the school can use any photos on their website. Ivette also confirmed I could use any photos on my website. I still don’t like to post photos of students without their permission but this was the one exception.

Holy Family Bilingual School has parents sign photo release forms so that the school can use any photos on their website. Ivette also confirmed I could use any photos on my website. I still don’t like to post photos of students without their permission but this was the one exception.

Elizabeth Gregory Home week 4

Added on by Madeline Stevens.

I interviewed Annie and took this photo of her and her dog, Bubba three weeks ago. She is incredible. Elizabeth, the woman who coordinates interviews, edits them and publishes the newsletter told me Annie's story was finally up. I interviewed two more amazing women on Monday, April 30, 2018. 

Screen Shot 2018-05-02 at 6.22.17 PM.png