Improve mobile display

[hancush]

About 10% of our users visit the site on a mobile or tablet device. That might not sound like much, but it amounts to ~7,000 people this year. The quality of site display on smaller screens is pretty variable. Let's put some thought into improving display for non-desktop devices.

[xmedr]

I did some snooping with browserstack and my phone to see how things are. Here are some thoughts on some pages. Lmk what you think @hancush, I can pick any or all of these up anytime:

• General

  • On browserstack devices other than galaxy s21, the top nav bleeds off of the page a bit, which makes it so that the logo and expanded nav items also render slightly off the page. My phone is an s21 and both mine and theirs seems to be fine here.

• Homepage:

  • Could possibly use dividers between listed meetings

• Board members listing:

  • The recent activity section displays fine when showing less, but when showing more, row items get pushed to opposite edges of the container (Edit: this isn't consistently happening)
  • Related to that: would it be worth considering moving that show more button to the top of that container for mobile? It's potentially a lot to scroll through to get back to the show less button at the bottom if you accidentally clicked it or changed your mind.
  • The map that says "tap to view details" just takes you to the person detail page for that polygon instead of showing details. If this is a feature we want on mobile, then this might be a priority.

• About Us

  • page scrolls horizontally a bit for board report statuses table

• Board report search

  • After searching once, the collapsed nav disappears. comes back on refresh
  • Might be nice to have a separator between related search terms for clarity on mobile

• Events listing

  • The top section with the date selector, list button and refresh could be a little more clear. Instructions in the date picker get cutoff and I initially wasn't sure what the bulleted list button was for

• Minutes search:

  • Same as top section of events listing.
  • The td showing what kind of meeting it was is blank. This also feels like a priority.

• Event detail:

  • The event's heading with details could use some horizontal space

[hancush]

@xmedr Thanks for this! Let's start working through these by section. Want to pick up the General and Homepage items?

Let's also take this opportunity to upgrade to the latest Bootstrap! As there are quite a few changes between legacy and contemporary Bootstrap, I'd like you to reproduce the existing site design but write the new templates from scratch (of course, copying and pasting content and other reusable elements). LMK if this makes sense!

Can you open up a branch called "mobile-updates", then branch off that branch and start your changes? We'll use "mobile-updates" as a long-lived feature dev branch and continue to branch off of it as we move through this list.

[xmedr]

@hancush Yep this sounds good to me, and in that case I'll probably do the bootstrap upgrade in tandem with the mobile updates. Ty!

[xmedr]

@hancush update for you, I was able to get a draft of the General and Homepage upgrades and bootstrap migration on the mobile-adjustments branch, and I've started work on the About Us (was hoping I could knock that out before EOD today, but I'm almost done with that one)

[hancush]

@shrayshray These changes are deployed to the staging site! https://lametro.datamade.us/ Want to take a spin and let us know what you think?

[hancush]

@xmedr to redeploy to staging for Metro review in October.

[xmedr]

@shrayshray These changes are redeployed at https://lametro.datamade.us/ and includes the most recent updates at time of writing. That includes things like the alert manager and the Caltrans board members map layer.

Note: The alert manager uses styles based on this upgrade. So on the live site, the Primary and Secondary alerts may not have specific colors until this is brought in. The other alerts should work just fine for now, though.

[shrayshray]

@xmedr This is looking great to me on my iOS devices, and I have a couple notes below. I asked @camachoo and @neilarellano to check on their devices and add feedback here as well. Notes:

1. On meeting pages, it looks like there could be some vertical space added between the recording buttons:

2. Can you add a scroll bar to the list of directors on the mobile version, similar to on the desktop version (screenshot below)? This would make it more clear there are more directors in the list to view.

3. Can the view PDF and download buttons be emphasized, either with bold or larger font on the Board Report pages?

4. Is it possible to reissue admin login credentials to the staging site? The credentials I have aren't working to login and see the new alert styles. This is only if you want me to review the new alert styles here, before they are live (but not a huge deal because we'd preview them on live before pushing to users anyway).

[xmedr]

@shrayshray Thanks for this! To answer your questions:

1. Good catch, there absolutely can be some space in between those buttons
2. So far, the appearance of the scroll bar seems like it's controlled by the mobile OS. I'll do some more digging on this though to be sure. In case it doesn't pan out, the plus side is that it does show once you start scrolling.
3. For sure, we can get that emphasized. Below I have an example of both a font size increase and bolded text, what do you think? If it's too much we can just do one or the other.
4. That'd be useful to for you all to have working logins for the future even, so we'll get that back up

[hancush]

@xmedr Can you provide an update on this?

[xmedr]

@shrayshray I've got an email coming your way with new login credentials for the staging site at https://lametro.datamade.us/ , and changes from your feedback has been redeployed there.

There's also some bonus changes from the first round of accessibility adjustments discussed in #1021. The most notable changes are higher color contrast throughout the site, and the addition of underlines to links to help distinguish them beyond just color.

If you have the time, would you be able to take a look at this by the end of the week? No worries if you folks are busy!

[shrayshray]

@xmedr on the homepage, could you add additional contrast to the text below the search box? Maybe a white background behind it? The image behind the text obscures it in some views and while the new higher contrast helps, more would be better.

[xmedr]

@shrayshray of course! though it looks like you might be looking at a different version of the site. is this maybe the link for the staging site on heroku that was recently shared with you? if so, that unfortunately doesn't have the styling changes on there. sorry for not realizing this would've been confusing sooner!

we'll be keeping the old staging site available until these changes are approved. so for now that's going to be at https://lametro.datamade.us/ and if anything else changes i'll be sure to give an update. so on this link, that text looks something more like:

and i can definitely still increase the contrast more if we need

[shrayshray]

@xmedr my screenshot was from the live site and it definitely looks better on staging than on live! But Omar requested even more contrast than what we're seeing on staging.

[xmedr]

@shrayshray absolutely! here's what it looks like in that white box. and i agree, this does feel way more readable.

also change of plans on that old staging site. we did end up taking that down, and instead we're putting these changes up on the new heroku staging site you were using before, found at https://la-metro-councilmatic-staging.herokuapp.com/. apologies for that bout of switching and thanks for bearing with me on this! 🙇

[shrayshray]

@xmedr beautiful! Thank you!

[xmedr]

@shrayshray absolutely! and of course let me know if you folks find anything else on this or if we're good to go

[xmedr]

@neilarellano @camachoo these changes are back on staging for review!

https://la-metro-councilmatic-staging.herokuapp.com/

[neilarellano]

Hi Team,

I noticed when I was going through Board Reports search results that some informational labels were overlapping on Android mobile. Please see below:

[xmedr]

@neilarellano thanks for catching that! i've got that fixed, and staging now looks like below. let me know whether you find anything else

[xmedr]

@shrayshray Thanks again for signing off on the current set of mobile/accessibility changes! The next two parts are up on the staging site now for you folks to review. Here are some major things to look out for, for each category:

Operable (2 of 4)

• Use the keyboard to navigate through various pages, including those with maps.
• Confirm that
  • tab order is predictable.
  • a bypass block exists at the start of each page, that can skip to the main content of that page.
  • at no point do you get stuck and cannot tab out of an element or group of elements.
  • visible focus is maintained for each element tabbed through.
  • the site is as usable with a keyboard as it is with a mouse, with the exception of map interaction.
  • there are sufficient accessible alternatives to the maps. The board members listing page has the adjacent members listing table, while individual board member pages have the heading of the map.

Understandable (3 of 4)

• Adding the use of a screen reader, navigate through various pages including those with maps.
  • Note: Some screen readers need a language pack to read different languages. For example, to get Spanish in VoiceOver go to Settings > Accessibility > Open VoiceOver Utility > Speech and click the plus button to add a language.
• Confirm that
  • the screen reader predictably announces each element on the page.
  • the screen reader announces elements in their appropriate language.
  • links that open in a new tab/window are announced by the screen reader.

In the meantime, we'll continue work on the last category.

[xmedr]

@shrayshray we're close to done with the 4th leg of the a11y changes! though we'll still hold off on bringing it in to the staging site until this previous round of review is done.

[xmedr]

Updating this with details from the latest meeting. We’re done with the last category of the a11y changes and just waiting for the previous two to get tested so we can push this last one up. Once that's finished, we can get everything onto the main site!

@shrayshray were you folks able to find any issues with the "operable" and "understandable" categories? If not, I can push the last bit up

[xmedr]

@camachoo @neilarellano As mentioned in today's meeting, below is the link to the review app containing the Operable and Understandable changes (instructions for testing listed above), as well as the Robust changes. This environment will be a bit outdated as far as other changes that have been made throughout the site, but will be sufficient to test these particular accessibility adjustments!

Review app - https://la-metro-cou-a11y-robus-n1od02.herokuapp.com/

Robust testing instructions (4 of 4)

• Use a programmatic HTML checker like W3's own Nu HTML Checker to compare the html of the review app and the live site on various pages
• Confirm that the number of errors and warnings have been reduced.
• Note: some of the warnings/errors present are from third party technologies. Many of them can be upgraded to resolve these issues, and those are listed here.

[neilarellano]

Hi Team! We have confirmed most of the listed updates. Below is a list of comments and questions we have for the line items below:

• I am unable to load the search results page on the review app.
• We tested read aloud using Edge’s native screen reader. The pages were readable and understandable using the screen reader. Below are a few comments on what may be confusing to our audience when using the screen reader:

1. About us page’s Board Report Status table section – it may not be clear that this is a table being read aloud. The headings are read but the content of the table may not be understandable.
2. Pages containing board report numbers have the dashes read as “to” instead of a dash. For example 2024-0001 is read as “two zero two four to zero zero zero one” instead of “two zero two four dash zero zero zero one”. I am unsure if this is something we can do anything about or if this is dependent on the specific reader used.
3. The agenda PDF is not being read aloud even though the PDF can be tabbed through. I’m not sure if this is expected behavior.
4. The alert banner that we set is not being read aloud at all in any page where it is visible.

• links that open in a new tab/window are announced by the screen reader – Not sure how to test this out, so far the links are just read and does not say if it opens in a new tab or not. What is the expected behavior for this and is there a recommended way of testing this outside of just the native TTS reader on browsers?

[xmedr]

Thanks so much for this @neilarellano! I've got an updated version of these changes merged in with the latest changes to the site at: https://la-metro-cou-a11y-robus-rcwgkd.herokuapp.com/

Here's some answers to your comments. If this looks good then we can treat this as a checkpoint to get things merged in and continue work from here!

• The search should be working now!
• Thanks for catching that on the table! I'll open up a separate issue to fix that after this comes in since the problem also exists on the live site.
• You're right that this is specific to each screen reader's settings (eg. mac's voiceover doesn't read it at all by default). Users can specify how they would like their reader to handle dashes and similar characters. Manually coercing that on our side has the potential to make the experience better for some but worse for others. Leaving that up to the user is the best course of action here.
• The pdf seems to behave differently for different screen readers, though none of them are particularly good as of now. We have issue #1089 open to look into improving that after these changes come in.
• I've made the alerts tabbable to make sure that they will be read!
• For links opening in a new tab, we're expecting the reader to say the text in the link followed by "link opens in a new tab". An example would be search results. Do those also not get read for you?
  • Another way we can see if that phrase should be present is by inspecting the element in your browser and looking for its aria-label. Here's an example of a search result in chrome, with the gray box being a visual representation of what VoiceOver reads:

[xmedr]

@neilarellano Whenever you get a chance, let me know how this looks to you!

[neilarellano]

hi @xmedr

The alert can now be tabbed through but it is not being read by the screen reader. I do see the aria-label for links that open in new tabs, however, I am still unable to have the "link opens in new tab" be read aloud. I used Edge's default reader and tried it on Chrome on 2 different screen reader extensions. The rest looks good.

[xmedr]

@neilarellano Got it! I'll do some more testing with Edge and Chrome. Which screen reader extensions are you using on Chrome?

[xmedr]

@neilarellano Is the Edge default reader you're using the Read Aloud feature? If not, then I can use whichever one you're using instead. But if so:

• It read the alert during my testing, though it skips to the main content by default when it starts. So going back to the alert read it aloud. If you can provide something like a screen recording of the issue happening, that would be a super helpful!
• It seems like Read Aloud doesn't support the aria-label tag that we're using to add that new tab context, which is unfortunate since it's a fairly common attribute to use. The alternative to account for Read Aloud would be to add the "new tab" text directly to each button and link, but I'm hesitant to suggest this since it would add more noise to links on each page.

Also for Chrome, I tested using Screen Reader and Screen Reader with On-Off Button and both were able to read the alert and the "link opens in a new tab" portion of the aria-label (though "Screen Reader with On-Off Button" was a bit unwieldy to use). I can definitely still try whichever specific extensions you've tried though to see what's going on with them.

[camachoo]

Do we have a full list of accessibility and mobile changes that have been made and not made? I think there was a full checklist, right @xmedr?

[xmedr]

@camachoo Apologies for the delay. Yes, each of the a11y issues is a checklist of items to consider, and each of their attached PRs has a Notes section with specific details on some changes. Here's a list of each issue and its corresponding PR:

Perceivable:

• https://github.com/Metro-Records/la-metro-councilmatic/issues/1021
• https://github.com/Metro-Records/la-metro-councilmatic/pull/1042

Operable:

• https://github.com/Metro-Records/la-metro-councilmatic/issues/1022
• https://github.com/Metro-Records/la-metro-councilmatic/pull/1051

Understandable:

• https://github.com/Metro-Records/la-metro-councilmatic/issues/1023
• https://github.com/Metro-Records/la-metro-councilmatic/pull/1058

Robust:

• https://github.com/Metro-Records/la-metro-councilmatic/issues/1024
• https://github.com/Metro-Records/la-metro-councilmatic/pull/1088

[xmedr]

@neilarellano Let me know if you have any updates/questions on your testing! It would be great if we could bring this in soon.

[neilarellano]

@xmedr I was able to test the TTS options and was able to get the same results. It is a shame that Edge's native reader doesn't support aria-label. It did work fine for me when testing through other TTS extensions in Edge and Chrome.

As for the alerts, should these alerts be read first before the site's main content? I think that would be useful in scenarios where we experience technical issues but have important announcements/workarounds through the alerts. Would it be possible to do this? Would there be issues or disadvantages to having the alerts always be selected/read first?

[xmedr]

In order to get this issue and its related prs closed and merged, I've opened issue #1172 for this last Edge bug.

[xmedr]

Closed by the final a11y category pr #1088 and now pushing these changes to production after successfully testing on staging.

Thanks for all the help on this, team!