Over 20% of US Adults Have a Disability
New reports show that around 20% of US adults have a disability. These can be temporary, permanent, or age-related. Expand your potential pool of customers or clients by making your website accessible.
Accessibility Is the Law
There are also increasing state and federal legal mandates for website accessibility, in part driven by lawsuits filed under the Americans with Disabilities Act (ADA).
There have been several notable website accessibility lawsuits
- Supreme Court finds against Dominos
- Beyonce hit with Class Action Suit
- Winn Dixie forced to update website after costly trial decision
A Screen Reader Demo by Mark Sutton
Subtitles are available within the video’s frame. A full text transcript is available immediately below the video.
Video Transcript
Mark Sutton: This is Mark Sutton from the University of California San Francisco’s IT Web Services Department, here today with a brief tour of screen reading technology.
I’m a blind person who has been using screen readers, Braille writers, scanning equipment, other adaptive technologies since my childhood. What a screen reader does is, for example, I’m gunna read this… start to read this page.
Screen reader reading webpage at plus 80% speed: Navigation 1 item, link, University of California, San Francisco, link, About UCSF, link, Search UCSF.
Mark: And what I will now do is slow down the speech rate.
Screen reader gradually reading slow: 80%, 75%, 70%, 65%, 60%, 55%, 50%, 45%, 40%
Screen reader reading at plus 40% speed: Link, UCSF Medical Center.
Mark: So, as I was about to say, a screen reader converts what’s on a computer screen into information that can be displayed through synthetic speech, or Braille output, and it does that by allowing you to use a computer instead of a mouse… a computer keyboard instead of a mouse. You can also use a Braille display as an input device.
Screen Reader: End of navigation
Mark: And what it does is it cleverly determines what’s on the screen and presents you that information in a way that would allow for efficient navigation of these pages. So for example, I could just keep reading…
Screen Reader (highlighting the header of the webpage): Banner, three items. Visited link, image, home
Mark: …line by line and we could be here all day, or I could jump to the first heading on the page.
Screen Reader: Heading level two, Search Form. Heading level two, you are here. Heading level one, make videos accessible.
Mark: So, as I’m moving down through the page, I can look for the category that interests me, and I’m just using commands built into the screen reader. So that’s all pretty simple description of what a screen reader’s all about. Now I’m gunna go over and show a few examples of how that can fall apart. (Switches to different webpage) So I have a couple of graphics on this page.
Screen Reader: Mark Sutton’s hands on a MacBook Pro, image.
Mark: So the first one is well described and uses an alt tag…
Screen Reader: You are currently on an (image).
Mark: …to describe what that graphic is all about. Now we go to the next graphic…
Screen Reader: Reader042116.jpg, image
Mark: Much less useful. So it’s important to use those elements. Uh, it’s also true for tables, so I’m gunna move to a table.
Screen Reader (highlighting a table): FDA approves medication, table, three columns, five rows, FDA approved medications, table.
Mark: So the table is pretty self-explanatory, and I’m gunna move into the table.
Screen Reader (shifting across table heading row): Medicine. Approved, column 2 of 3.
Mark: And then if I go down into the table…
Screen Reader (shifting down first table column): Medicine, Tolbutamide, column 1 of 3.
Mark: And as I move across…
Screen Reader (shift across first row): Approved 1975, column 2 of 3.
Mark: We’re getting the labels for the column headers and row headers. So it’s important when programming tables, forms and other elements on the webpages, to use the proper HTML codes. I’ll go to the…
Screen Reader (highlighting second table): Table, 3 columns
Mark: …second table on the page.
Screen Reader (highlighting first cell): Medicine. Row 2 of 5 Tolbutamide.
Mark (quickly moving through table cells): And as I’m in the table, I move across it…
Screen Reader: November 1995
Mark: …I get a date, but I don’t know what that date is associated with. So it’s important, as I was saying, to include proper coding tags for all these elements.
These are just a few highlights of a screen reader’s capabilities, and some of the ways in which the experience can fall short for a blind user. The life of students, faculty, staff and visitors is largely conducted on the Internet nowadays. Screen reading technologies can make many of these interactions work more smoothly. When developers pay attention to certain coding standards, blind persons are able to participate in digital communication; being able to do such things as understand calendars and schedules, enroll in or teach classes, conduct research, and many more essential activities that are conducted electronically. If developers of webpages and applications fail to take into account these design considerations, many people will be left out, unable to use these tools of daily life that are now taken for granted by most of us. The University provides a gateway to many key aspects of social participation. It’s imperative that access to University offerings is not jeopardized. For more information, go to digitalaccess.ucsf.edu. Thank you.
Who Needs Website Accessibility?
For example, you might want to make your site accessible for:
- People with visual impairments who use screen readers
- People with mobility issues, who cannot use a mouse, and sometimes use devices to navigate by keyboard
- People with colorblindness who might not be able to find “the green button”, or be able to tell when they are hovering over a button if the color contrast is low
- People with cognitive issues who are unsure of which option to select
- People for whom English is not the first language and use translation services
- People with temporary conditions like a broken arm, or parents holding small children who need to enter information easily with key strokes
- People relying on voice search using Alexa, Siri, or other popular devices
There are many small things that you might be able to do to start making your site more accessible, like adding “alt text” for all images and graphical info. Alt text is what screen readers read out loud.
Can you audit my website for accessibility?
We can help with website accessibility audits, accessibility remediation, and accessible design & development.