How many of you have taken a ride on public transit? Please raise your hands. Well I have and I m an active transit rider for 12 plus years.

Transcription

1 Howdy. How many of you have taken a ride on public transit? Please raise your hands. Well I have and I m an active transit rider for 12 plus years. Action: Take selfie with class. 1

2 My name is Jesse Quintanilla and I m the Web Designer for METRO, the Transit Authority of the Harris County area, located in Houston, Texas. I ve been at METRO for 12 years and managing and maintaining the ridemetro.org site and sub sites for 11 years. Before working for METRO, I developed my skills and gained experience by creating websites and identity systems through branding, of various companies from full time to freelance. I ve been designing since the 90 s, back in the days of Photoshop with no undo or layers. 2

3 Topics METRO s History Motivators for an Accessible Website Ridemetro.org Accessibility Process METRO s Future 3

4 We are the transit agency for the Harris County / Houston area, and provide services to the surrounding multi cities. Mission METRO s mission is to provide safe, clean, reliable and friendly public transportation services to our region. History 1973 The Texas State Legislature authorized the creation of local transit authorities Houston area voters created METRO and approved a one cent sales tax to support its operations METRO opened for business For a more complete history let s watch this video. 4

5 Play video >> 5

6 Motivators I 6

7 A great motivator for making your site accessible to Prevent Potential Litigation. We have patrons who are visually impaired who use screen reader software, like JAWS, Windows Eyes, NV Access and so on. So in order to have a better website for everyone, we needed to make it accessible. Two of our patrons complained about METROLift s trip planner not being accessible. By making the site more accessible we prevented potential litigation. Another great motivator, redesign a site to make it better based on surveys, analytic reports, public comments, internal employee comments, outdated technology, doesn t work on all devices and it is just outdated design. Need A Fresh Look 7

8 In 2015, METRO contracted a SharePoint expert to build METRO s first external Content Managed Site (CMS). On June 1, 2015 METRO got a new website but unfortunately, with very little accessibility. So, METRO s first digital accessibility team was created and met weekly. This group consisted of lawyers, I.T. Web developers, programmers, a few higher management folks and myself. The legal department was concerned about when the site would be completed with the required accessibility. The Digital Accessibility team then split up into smaller teams consisting of the staff who did the actual work on the site, managed and tested it. The Accessibility Web Team would meet weekly or daily, depending on the deadlines created. We established an internal timeline with deadlines set to meet goals until the site was completed. 8

9 Although the redesign was completed we still had a lot of work to do. As this site was still not accessible to the level we wanted. 9

10 Our original focus had been on making the METROLift Trip Planner, MACS WEB accessible, which we did, with a screen reader version of MACS WEB. Early on in our planning stage and after much discussion we asked ourselves if we should do more with the site. As a team we decided to undertake one of the agency s biggest challenges in the history METRO s website a complete overhaul to make METRO s site meet the WCAG 2.0 level AA standard. From this point forward, I worked with a team to make METRO one of the most accessible transit websites. 10

11 I Ridemetro.org Accessibility Process I 11

12 Click on W3C to show criteria, briefly. W3C developed WCAG 2.0 process in cooperation with individuals and organizations around the world, with a goal of providing a single shared standard for Web content accessibility that meets the needs of individuals, organizations, and governments internationally. The WCAG documents explain how to make Web content more accessible to people with disabilities. Web "content" generally refers to the information in a Web page or Web application, including: natural information such as text, images, and sounds code or markup that defines structure, presentation, etc. The WCAG documents explain how to make Web content more accessible to people with disabilities. Level AA METRO must meet all criteria as stated on the W3C site. 12

13 The main site and sub sites were made accessible Third party sites we contacted them and requested for them to met the WCAG 2.0 level AA standard Main website navigation was made accessible Sub and third tier sub navigation were made accessible Carousel navigation was made accessible I.T. applications were made accessible Third party applications we called and always confirm to make sure they are meeting the requirements requested 13

14 Financial tables must have captions, titles and were made accessible Ridership report data driven and accessible aspx All images must have an alt tag and title METRO videos require close captioning (CC) Some videos will have a transcript link to go with them, this is a work in progress PDF Forms that have no online form version are made accessible New text only PDFs were made accessible All new PDFs were converted to html text All other PDFs fall under the legal disclaimer 14

15 Since 2010 we have been placing videos of Board and Committee meetings on the site via our streaming video vendor. In 2016 we started adding Close Captioning to only the board meetings, because of cost. One of the problems in making all videos have close captioning is that it was to expensive. The other issue came up when Knowbility tested it. The issue was called a keyboard trap, which caused the user to be stuck in the video player. So I followed up with the vendor and asked if they would fix it we didn t see a new player until 2017 and it also had issues. In 2016 I came up with an alternative solution which was to add transcripts for each video, but because of the long Procurement process it took longer than expected to get this approved. Knowbility agreed the best course of action was placing transcripts for all board and committee meetings on the same Web page where the videos are located. I spoke with some of our visually impaired patrons and they all agreed and preferred transcripts over close captioning. Most of them said that a transcript would be easier to find information. For example, if they did a word search they could easily find it on a transcript where on a video they would have to listen to the whole video. So in 2018 I pushed to get the transcripts contract completed and just last week we finalized a vendor to get started on creating transcripts. 15

16 METRO had PDFs in the 100,000s dating back to 2005, the reason for this is because we are an open and transparent agency that serves the public. The problem was that it would be too expensive to convert them all to accessible PDFs and we didn t have the resources to do them in house. The team meet and discussed it with Knowbility and we all agreed the best course of action was for our legal department to write a disclaimer. This disclaimer was placed throughout the site on pages that had PDFs that were not converted. Accessible Formats (show Web page) Information found on this website can be provided in an alternative format upon request. Please contact Customer Service at to speak to a representative or the Accessibility Coordinator at accessibility@ridemetro.org. METRO will do its best to provide the requested alternative format within a reasonable time. 16

17 I attend the AccessU conference to learn and train what accessibility means in general and for websites. I learned much about accessibility and how it is not just simple alt tag updates to a site, but a cultural change for all of METRO. The team, consisting of three I.T. folks and myself we followed the WCAG s 2.0 Accessibility Guidelines online and started teaching each other the rules on how to make a site more accessible. As the Web team we found an abundance of tools and articles on the internet on how to make a site more accessible. I purchased a few books, A Web for Everyone, by Horton & Quesenbery and HTML5 Accessibility, by Joshue O Connor. After hiring Knowbility we learned how to improve our coding an use proper syntax and ARIA on the Web pages for screen readers. We all had training on how to convert PDFs to accessible PDFs. And eventually the rest of the team went to AccessU the following year. 17

18 Knowbility has a great team of professionals that walked us through the WCAG process step by step, provided detailed reports, conference calls with explanations on how to fix specific areas of the site using ARIA and proper syntax. Knowbility got us in touch with a PDF accessibility expert to train METRO staff on how to properly create an accessible PDF. This was part of our cultural change as we invited representatives form different departments that normally provide PDFs for the website. METRO s lawyers had informed our patrons that we were using Knowbility as our consultant and this news made them extremely grateful. The patrons now knew that we were in the process of making the site accessible for them and making it more user friendly for everyone. 18

19 Knowbility played a huge part in our review and testing of the site for accessibility for many months, in addition to our own in house testing. Because of the actions of or patrons who had been impacted by the METROLift Trip Planner, we had invited them and a group of other visually impaired customers to come test the site and provide feedback. This was some of our best testing as we learned how our customers use the screen reader software to read the website. We took a lot of notes during this testing stage and it was a great experience for all of us. METRO got real insight on what is important to our visually impaired customers as they provided us with good user experiences. We would make some quick fixes and some we noted for later. We learned that many times when we made an improvement for accessibility it was an allaround positive update of the website for everyone. Making the whole site accessible was a positive change. 19

20 We used many tools and tested the site on desktops, laptops, mobile phones and tablets. Some of the sites and software we used are listed here: 20

21 METRO's Future I 21

22 Play video >> 22

23 As you saw in the video METRO is looking into new ways to helping out our customers with accessibility improvements throughout METRO s system. As new accessibility technologies arise for mobile devices, browsers, computers and faster wireless connections the more companies are getting involved on providing good quality services to all customers. As a public transportation service, METRO like many other agencies is making progress in both the physical and digital realms to meet our customers needs. Helping them get to their destinations. METRO looks toward the future as we are in the process of working on a redesign of ridemetro.org website, that will be even better than the last one. 23

24 Play video >> 24

25 This concludes my presentation. Any questions? 25