1 of 23

B105: Designing Innovative, Accessible, & Elegant Web Spaces

Maddie Clybourn- Digital Services Manager

Vlad Udachin- Web Developer

2 of 23

3 of 23

Order of Operations

  1. Triage your site: What is most urgent? In our case: ease of screen reader navigation.
  2. What is secondary but still important? Logical organization structure/layout.
  3. Next, colors, fonts, media. Readable, expandable, contrast ratio.

​

4 of 23

Navigation and Layout

5 of 23

Colors

  • What are your brand colors?
  • What combination of those colors allow for best text readability?

​

6 of 23

Images, graphics and Animations

Scrolling Carousels: Avoid if possible… if not...

  • Design slides with color contrast/font guidelines in mind.
  • Embed descriptive tags into all images.

​

​

Twitter:

​

  • Use your scheduling tool to embed descriptive metadata into all images (if possible).
  • Endless Scroll=endless frustration.
  • Compromise: One tweet at a time.

​

7 of 23

Using true text vs. using graphics

Font readability, image contrast, scale.

​

8 of 23

  • Proportions matter

​

  • As priorities change, consolidate redundancies/visual clutter

​

  • Consider the ‘clicks’

​

  • Conduct a usability study

​

“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.” – Antoine De Saint-Exupery

​

​

9 of 23

Non-designers, look to the greats:

10 of 23

Tina Roth Eisenberg: swiss-miss.com

Inclusive Design Patterns Hayden Pickering

11 of 23

Beyond the Required

“The quality of being easy to obtain or use.”

​

“The quality of being easily understood or appreciated.”

​

Representation and Transparency:

  • What messages do your graphic elements convey?
  • Is data/information about your organization apparent?

​

​

​

12 of 23

Other fun things:

Using new and emerging tech to provide greater access:

​

13 of 23

Contact:

Email: maddiehines@gmail.com

Twitter: @maddierhines

14 of 23

Common mistakes

  • Images don’t have “alt” attribute.
  • If screen reader skips h1(or h2,h3) headings. Add “tabindex” attribute.
  • Missing “longdesc” for complicated images eg. charts.
  • Font size is too small. (<14px)
  • Unlabelled input fields/buttons.
  • Lack of contrast. (less than 4.5:1 for level AA; 7:1 for AAA)

​

​

​

15 of 23

<H1>Common mistakes</H1>

​

  • Uninformative link anchors eg. “Click here”.
  • Video, audio or slideshows have no controls eg. Pause/Stop, pagination buttons.
  • Video, audio or slideshows with no text captions.
  • No sitemap
  • No skip navigation link
  • No heading tag “H1”

16 of 23

Focus

Use “tabindex” attribute to setup focus sequence for Tab key switching.

<a href="xxx" tabindex = "1">First link in list</a>

<a href="xxx" tabindex = "2">Second link in list</a>

<a href="xxx" tabindex = "4">Link that was added long after the original list was created</a>

<a href="xxx" tabindex = "3">Third link in list</a>

​

17 of 23

Testing tools

​

​

18 of 23

Screen readers

​

19 of 23

Font Readability

​

​

​

Times: Illustration

Lobster: Illustration

20 of 23

Accessible PDF Documents

Make PDFs accessible (Acrobat Pro)

  • Choose Tools > Action Wizard.
  • From the Action List, click Make Accessible.

​

https://helpx.adobe.com/acrobat/using/create-verify-pdf-accessibility.html

​

21 of 23

Accessible PDF Documents

​

Check accessibility of PDFs (Acrobat Pro)

  • Choose Tools > Accessibility.
  • In the secondary toolbar, click Full Check.

​

https://helpx.adobe.com/acrobat/using/create-verify-pdf-accessibility.html

​

22 of 23

U.S. General Services Administration

Office of Information, Integrity, & Access

​

23 of 23

My contacts