Full Stack JavaScript Developer | Educator | Journalist

IF ME open source project- React and Ruby

Added on by Madeline Stevens.
  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 three big accessibility topics 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. 

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.
4th grade volcano flashcards.&nbsp;

4th grade volcano flashcards. 

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

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

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

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

IMG_5060.jpg
Prepping for cabbage juice lab over the weekend.&nbsp;

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.&nbsp;

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

IMG_5038.jpg
Lynsey getting into her garb.&nbsp;

Lynsey getting into her garb. 

IMG_5107.jpg

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

Coding Falcons! Practice presentation day!

Added on by Madeline Stevens.

Yesterday we all gathered around each of the seven students and listened to them explain what their sites are about as they walked through them. Ivette and I shared some typical questions developers will get during stand ups.

It was so great to hear Jared ask Emmanuel "What were some of your road blocks or challenges?"  Emmanuel explained that he uses trial and error a lot of the time. "Oh, so you used your thinky think?" responded Jared. This is one of their favorite sayings. hahahaha.  

It was awesome to hear Rihanna explain that Ivette and I showed her two different ways to use image tags but that this was actually a good thing because now she knows more than one way! 

blurred.jpg

Google's Women Techmakers Summit on 3/3/18 in Seattle

Added on by Madeline Stevens.

Google Women Techmakers summit on March 3, 2018 in Seattle. Panelists, speakers, two different 2 hour workshops to choose from (either an Android Things kit set up or a "confidence building" workshop to practice tips for public speaking, pitches, vocal warm ups, etc.). 

Thank you so much, Liz, for letting me use your collage of images. I just wanted to post the photo of us in the photobooth (bottom left).&nbsp;

Thank you so much, Liz, for letting me use your collage of images. I just wanted to post the photo of us in the photobooth (bottom left). 

IMG_4223.jpg
IMG_4224.jpg
IMG_4229.jpg