Skip to content

Instantly share code, notes, and snippets.

@mkwsnyder

mkwsnyder/Accessibility Presentation for Aggietime Ultra.md

Created December 8, 2023 21:44
Show Gist options
  • Save mkwsnyder/d2aa3f404b784acbf0bd3f2f3baec7cb to your computer and use it in GitHub Desktop.
Save mkwsnyder/d2aa3f404b784acbf0bd3f2f3baec7cb to your computer and use it in GitHub Desktop.
Download ZIP
Accessibility Presentation for Aggietime Ultra
Raw
Accessibility Presentation for Aggietime Ultra.md
tags theme
work/integrations
css/my-theme.css

Mark's Web Accessibility Extravaganza

course fee: $19.99 + S&H

note: Mention how I'm a hack and a fraud and will be reading from my notes a lot lol

This information is mostly from the WebAIM training I did back in 2019.

My WebAIM notes (and these slides) will be available after this training.

note: I highly recommend that you attend the WebAIM training at some point if you haven't in the past.

My notes are also not the best notes I've ever taken on account of taking them nearly five years ago, so no hate if they're not perfect.

What is accessibility actually?

(In the context of websites and user interfaces)

note: "The oxford dictionary definition of…" jk lol

Basically making websites easier to use and navigate. This includes making web pages parse correctly for tools like screen readers.

Screen Readers

Software used by the visually impaired (or whomever needs it) to help people navigate web pages without sight.

<!-- Tailwind -->
<div class="sr-only"></div>
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;

note: Screen readers use text-to-speech to read out a page, so pages need to make sense structurally to a piece of software. They use things like headings, landmark HTML elements, alt text, link text, etc. know when and what to read to the user.

Screen readers are one of the most important reasons why accessibility standards are so important. If a web page is good enough for a screen reader, it usually passes all the other accessibility requirements.

Sometimes adding accessibility features "messes up" the layout. If this is the case, you can use something similar to Tailwind's .sr-only class which visually hides the element on the page but still makes it available to screen readers.

### Common Disorders That Make Accessibility Vital - Cognitive - Learning - Visual - Blindness - Colorblindness - Auditory - Vestibular - Epilepsy - TBI (Traumatic Brain Injury) ![[../z_attachments/accessibility-meme.png]]

note: Cognitive and learning disabilities are the largest group by far.

WCAG

Web Content Accessibility Guidelines

Three tiers:

  1. A: The minimum for good standards.
  2. AA: What we are required to meet as a university (we are here).
  3. AAA: High standards that we should strive for, but are not required.

Use the WAVE Tool

note: Demo this on aggietime.

UI Frameworks Help

  • MUI (React)
  • Skeleton UI (Svelte)

note: One of the benefits to using frameworks like MUI is they usually do a pretty good job at handling most of the accessibility basics, so you don't have to worry as much. They don't always do a good job, however, such as MUI's <TextField />, which we'll get into now.

Accessibility Issues Found With Aggietime Ultra

o h n o

note: Aggietime Ultra has a few accessibility issues, though overall we did a pretty solid job.

Missing Form Label

(The most common issue that came up for Aggietime Ultra.)

<!-- bad -->
<input type="text" />

<!-- good | input in label -->
<label>
	Name
	<input type="text" />
</label>

<!-- good | `for` referencing input id -->
<label for="my-name">Name</label>
<!-- (these don't have to be next to each other) -->
<input id="my-name" type="text" />

Contrast

note: demo the website

Empty Button

  • Usually happens when a button has an icon but no text in it.
  • Easily fixed with a title attribute.
<!-- bad -->
<button>
  <i class="fa-close" />
</button>

<!-- good -->
<button title="Close">
  <i class="fa-close" />
</button>

Broken ARIA References

  • aria-labelledby
  • aria-describedby

note: aria-labelledby and aria-describedby can be used to link HTML elements that are otherwise unconnected. For example, if you have tabular content, all of the tabs you click are next to each other, but the tab content is likely much further down the page. The aria attribute will be identical to the id of something you are trying to reference.

This error in particular happens when you have an aria reference to an id doesn't exist.

Demo the MUI tabs to help convey the idea.

Don't Skip Heading Levels

<h1>
... content ...
<h2>
... content ...
<h5> <!-- this is bad -->

note:

  • Vitally important for screen readers and helping them understand the layout of a page.
  • Do not skip heading levels; Go from h1 to h2 to h3. Treat as a collapsible document.
  • Usually only <h1> per page; Should describe the page.
  • Headings are vitally important for screen readers.
  • Headings should describe a section of content.
  • If you want to use a different heading because it's "too big" or "too small", just change the size and use the appropriate header. Tailwind and MUI both have ways to override how it looks.

Tables and Table Headers

  • Don't have empty table headers.
  • Don't use <table> for page layout; use CSS flex or grid. (This point wasn't an issue with Aggietime Ultra).

note: If you wouldn't use it for a spreadsheet, don't use a table.

Page Titles

  • Should be descriptive for the current page.
  • Shows up in the window titlebar.
  • Currently, every page in Aggietime Ultra is just called Aggietime.
  • Position Name | Clock In/Out | Aggietime

note: Explain how the Page | Department | USU system works over on the Web Team/most of campus (demo link). Mention how it's more or less the inverse of the URL path.

Important Things That Were Not Issues in Aggietime Ultra

Keyboard Navigation

"Can I navigate this entire website easily using only the Tab key?"

note:

  • Not everyone can use a mouse.
  • The order you tab through things should make sense. If it does, the layout of the page will also likely make sense for screen readers.

Dialogs & Modals (Popups)

Rule of thumb: Should only be used to convey information.

note:

  • Should only be used to convey information. Forms should generally not be in them.
    • We have a couple of really basic ones in Aggietime Ultra, so it should be fine.
  • Should be escape-able via Esc.

Mobile Responsiveness

<!-- tailwind -->
<div class="grid-cols-1 md:grid-cols-2 xl:grid-cols-3">
	...
</div>

note:

  • Mobile responsiveness is super important in this age of smartphones.
  • A lot of modern UI libraries have pretty good built in support.
  • """Design mobile first.""" (something a lot of people say these days; not necessarily bad advice)
  • Personal rule of thumb:
    • The more casually someone might access a website, the more important that it is to be designed mobile first.
    • The more "power-user" someone is needs to be to use a page, the less important it is to be designed mobile first.
      • It should still be accessible on mobile.
    • A good example of this is actually Aggietime Ultra. The student facing portion works great on mobile, which is important given who uses it and its relatively low complexity. The staff/HR facing portion is still mobile accessible, but given how much is going on, it's not that bad that it's designed desktop first.

Links

  • Bad: Click here to learn more.
  • Good: Review the Aggietime Documentation to learn more.

note:

  • Links need appropriate color contrast.
    • If and underline is not being used (it probably should), they need greater contrast. When in doubt, use the WebAIM contrast checker.
  • Link text needs to be descriptive. A screen reader can read out all the links on the page, and if all say "click here" or "learn more", the user will have no idea what any of them mean. The point of the link should make sense without surrounding context.

Images

  • Sufficient alt text
  • Not too large (file size)
  • Text that is part of an image is generally bad
<img src="..." alt="A boat sailing by the sea." />

note:

  • Every image should have alt text, with the exception of decorative images.
    • Decorative images are images that add nothing to the page content-wise. Just there to "fill out the space".
  • Doesn't need "a picture of" before the description, otherwise it will read "A picture of a picture of a boat sailing by the sea."
  • Images should be as big as they need to be. Don't load an 8K image from a DSLR camera when it's going to be 400px image large on the page anyways. Use images that are the size of what they will be on the page.
    • Takes much longer to load.
    • Destroys mobile data usage.
    • Costs you more in monthly bandwidth.

ARIA

Accessible Rich Internet Applications (you don't need to remember the acronym)

Any HTML attribute prefixed with aria-

note:

  • Rule Number One: Only use ARIA if there aren't existing HTML regions or elements. Use these before ARIA (ARIA should be a fallback): 
    • <header>
    • <nav>
    • <main>
    • <region>
    • <aside>
    • <footer>
  • Used to convey additional and more technical description for an element.
  • Typically used on <div>.
  • Use appropriate ARIA roles.
  • "Region" and "Landmark" are identical to screen readers.
  • Screen readers navigate via <region>.

Misc.

  • Don't convey information with exclusively color.
  • Use legible fonts and text size.
    • The less legible a font is, the larger the text needs to be.
  • Avoid ALL CAPS text whenever possible.
  • Avoid full justification.
  • $0.99 $.99 vs. $99
  • Use the correct list for the job (<ol>, <ul>, or <dl>)
  • a:hover, a:focus
  • :focus CSS

note:

  • Screen readers may read ALL CAPS text letter by letter.

  • $.99 and $99, will likely be read the same.

  • <ol> for ordered, hierarchical lists

  • <ul> for unordered, bulleted list

  • <dl> for definition/description list (name/value pairs, FAQ's)

  • If something should be visible on hover, it should also be visible on focus.

  • :hover should never be used to hide vital information.

  • :focus has a noticeable, if ugly, order by default. It can be changed to something more visually pleasing as long as it is still obvious.

  • Large click targets

The End

This presentation and my (admittedly old) WebAIM training notes will be on my GitHub (I'll post the links to Slack or something).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment