Rian Rietveld @ #WCUS:

Rian is demonstrating Voiceover and ARIA for the WordCamp audience.

She’s giving a very practical example of why semantics matter when it comes to the web.

Aria-live: Tells screen readers what’s changing on a page without refreshing the page.

aria-live allows dynamic changes to be announced by screen readers.

From earlier in the talk: First rule of ARIA: Don’t use ARIA. Use a native HTML 5 element first, then add ARIA *when necessary*.

Make sure when using aria-live that your announcement is not too verbose: For example: announce the number of search results, not every search result.

Overrule a link’s anchor text with aria-label. Beware: aria-label overrules a link’s anchor text completely. For screen reader users it’s as if the link text does not exist.

screen reader text class: Hide something from sighted users while announcing it to screen reader users.

Use screen reader text class with the span element.

Aria-describedby and aria-labeledby: aria-labeledby replaces label text, (see form elements), aria-describedby adds extra information to the label text.

Rian is able to turn VoiceOver on and off. This would never happen using Jaws. You can do it with NVDA though. Sorry, couldn’t resist.

Make it work before you make it nice.

Miriam Schwab @ #WCUS:

Why is cryptomining from websites bad? Because it eats resources, plus governments shouldn’t be cryptomining.

Magic Cart: Going on for last three years, no one knows origination, attack ID’s third-party scripts on websites and then hacks scripts.

Magic Cart hacks scripts for the purpose of skimming credit card information.

Content security policies: white-list sources via browser header, if a source is not white-listed, it can’t be installed. Applies to trackers and other third-party web scripts like Google Analytics or Google Fonts.

Demonstrating code snippets which implement content security policies, will share slides later.

Includes log of violations of content security policies. I’m going to love looking at this code.

If you research content security policies online, not a lot of upp-to-date information, CSPs have been around since 2012.

W3C’s docs critiqued as being illegible, especially for those who speak English as a second language. Agree. Internationalization FTW!

Google is “do-as-we-say-not-as-we-do” with regard to its CSP docs V. what it does with its Google Analytics and other scripts.

Keeping up with what’s been added to pages manually is hard. Use Scrict Dynamic CSP instead. One policy across multiple pages.

Google has tools for CSPs: Strict Dynamic Test Bed, not sure of accessibility of tool will need to check later.

CSP can be added using meta tag or in theme’s functions.php file. Also .htaccess. Use these if you don’t want to work with browser headers. Probably can stick this in custom functionality plugin too.

CSP Mitigator from Google: Check http response headers, if no CSP present, will alert. If CSP present but there are problems with it, tool will offer suggestions.

There are also WordPress plugins for this, not recommended because some are out-f-date, but easy way to get started.

report-uri.com: Alternative to CSP Mitigater, useful if you have issues philosophical with Google.

Google’s resources making it possible for more people to implement CSPs.

Now demoing offline copy of White House website: No CSP, which means things can be injected client-side.

For the blind people playing at home, the injection to the Freedom scientific website changing the site tagline to “Too expensive products for the visually impaired” was a result of no content security policy being present on the site. Not from speaker, my own injection of another example.