MVP Shares Accessibility Design Tips

Published 01-16-2021 12:47 PM 1,105 Views
Senior Member

The importance of online accessibility has become even more pronounced for Office Apps & Services MVP Susan Hanley.

 

In the past four years, the consultant and author specializing in successful collaboration and knowledge management solutions turned 60, became a grandmother, and attended her 40th college reunion.

 

“These personal milestones are a stark reminder that even though I feel a lot younger and can do a lot more physically than many of my much younger friends, I’ve noticed personally, as people age, they may experience changes in their abilities,” Susan says.

 

“As an information architect, I care enormously about organizing and presenting information. As a business analyst, I care enormously about generating business value. For the past few years, my professional learning journey has been driven by some personal and professional experiences that have caused me to think a lot about time, or the lack thereof, and inclusion.”

 

Susan, who is dedicated to creating easier-to-consume SharePoint sites and pages, says one of those instructive professional experiences came in the form of the Intrazone podcast ‘Accessibility from The Start’ and guest Lauren Back, a usability engineer at HCL Technologies who happens to be blind.

 

In the 2019 episode, Lauren discussed how she imagined that someone who is not blind could quickly scan a webpage to get a sense of what the page is all about. However, Lauren uses a screen reader and, depending on how the page author created the page, she might have to listen to every single word on a page.

 

“Lauren got me thinking about other things I should be doing to make my SharePoint pages not just more organized and readable, but also more accessible,” Susan says.

 

There remains an accessibility awareness gap for many information architects and business analysts, Susan says, but it is one which can be overcome with better education and training.

 

“For example, I think people know in general that it’s good to add alt-text for images, but many people aren’t aware of what exactly you should put in alt-text,” she says. “I took the Accessibility fundamentals courses in Docs.microsoft.com and learned for the first time about the accessibility checker in PowerPoint. I am still working through all of my PowerPoint slide decks to make sure that they are more accessible!”

 

Ensuring accessibility is an ongoing process, and Susan shares the following three tips in making SharePoint pages and news accessible to all. 

 

First, write content “upside down.” People scan web pages, they don’t read them, Susan says. To make pages more “scannable” for all readers, put the key information that readers must have to be successful at the top of the page. Try to write more like a journalist with the key points early on the page and less critical information next. Put your conclusion first, instead of at the end.

 

Second, make sure all images have ‘alt text.’ Susan notes that all images and graphics need alternative text descriptions that allow people who use a screen reader to understand what they represent. Alt text also shows in browsers when images don’t load, so it is helpful for slow internet connections as well.

 

Third, Susan suggests using headings to make pages easy to navigate. This means using the built-in H1, H2, and H3 styles in text web parts. This allows readers to jump from section to section using keyboard shortcuts such as the Tab key. Heading styles also allow for the creation of “table of contents” for pages using page anchors (bookmarks).

 

For more tips, check out Susan’s article on Sharepoint accessibility on the Humans of IT Blog. 


Sue.jpg

 

Image: Office Apps & Services MVP Sue Hanley and her granddaughter.

%3CLINGO-SUB%20id%3D%22lingo-sub-2067695%22%20slang%3D%22en-US%22%3EMVP%20Shares%20Accessibility%20Design%20Tips%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2067695%22%20slang%3D%22en-US%22%3E%3CP%3E%3CSTRONG%3EThe%20importance%20of%20online%20accessibility%20has%20become%20even%20more%20pronounced%20for%20%3CA%20href%3D%22https%3A%2F%2Fmvp.microsoft.com%2Fen-us%2FPublicProfile%2F5001201%3FfullName%3DSusan%2520Hanley%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EOffice%20Apps%20%26amp%3B%20Services%20MVP%20Susan%20Hanley%3C%2FA%3E.%3C%2FSTRONG%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIn%20the%20past%20four%20years%2C%20the%20consultant%20and%20author%20specializing%20in%20successful%20collaboration%20and%20knowledge%20management%20solutions%20turned%2060%2C%20became%20a%20grandmother%2C%20and%20attended%20her%2040th%20college%20reunion.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%E2%80%9CThese%20personal%20milestones%20are%20a%20stark%20reminder%20that%20even%20though%20I%20feel%20a%20lot%20younger%20and%20can%20do%20a%20lot%20more%20physically%20than%20many%20of%20my%20much%20younger%20friends%2C%20I%E2%80%99ve%20noticed%20personally%2C%20as%20people%20age%2C%20they%20may%20experience%20changes%20in%20their%20abilities%2C%E2%80%9D%20Susan%20says.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%E2%80%9CAs%20an%20information%20architect%2C%20I%20care%20enormously%20about%20organizing%20and%20presenting%20information.%20As%20a%20business%20analyst%2C%20I%20care%20enormously%20about%20generating%20business%20value.%20For%20the%20past%20few%20years%2C%20my%20professional%20learning%20journey%20has%20been%20driven%20by%20some%20personal%20and%20professional%20experiences%20that%20have%20caused%20me%20to%20think%20a%20lot%20about%20time%2C%20or%20the%20lack%20thereof%2C%20and%20inclusion.%E2%80%9D%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ESusan%2C%20who%20is%20dedicated%20to%20creating%20easier-to-consume%20SharePoint%20sites%20and%20pages%2C%20says%20one%20of%20those%20instructive%20professional%20experiences%20came%20in%20the%20form%20of%20the%20Intrazone%20podcast%20%E2%80%98%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fmicrosoft-sharepoint-blog%2Fthe-intrazone-episode-30-accessibility-from-the-start%2Fba-p%2F575487%22%20target%3D%22_blank%22%3EAccessibility%20from%20The%20Start%3C%2FA%3E%E2%80%99%20and%20guest%20%3CA%20href%3D%22https%3A%2F%2Fwww.linkedin.com%2Fin%2Flauren-back-50b67723%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3ELauren%20Back%3C%2FA%3E%2C%20a%20usability%20engineer%20at%20HCL%20Technologies%20who%20happens%20to%20be%20blind.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIn%20the%202019%20episode%2C%20Lauren%20discussed%20how%20she%20imagined%20that%20someone%20who%20is%20not%20blind%20could%20quickly%20scan%20a%20webpage%20to%20get%20a%20sense%20of%20what%20the%20page%20is%20all%20about.%20However%2C%20Lauren%20uses%20a%20screen%20reader%20and%2C%20depending%20on%20how%20the%20page%20author%20created%20the%20page%2C%20she%20might%20have%20to%20listen%20to%20every%20single%20word%20on%20a%20page.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%E2%80%9CLauren%20got%20me%20thinking%20about%20other%20things%20I%20should%20be%20doing%20to%20make%20my%20SharePoint%20pages%20not%20just%20more%20organized%20and%20readable%2C%20but%20also%20more%20accessible%2C%E2%80%9D%20Susan%20says.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThere%20remains%20an%20accessibility%20awareness%20gap%20for%20many%20information%20architects%20and%20business%20analysts%2C%20Susan%20says%2C%20but%20it%20is%20one%20which%20can%20be%20overcome%20with%20better%20education%20and%20training.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%E2%80%9CFor%20example%2C%20I%20think%20people%20know%20in%20general%20that%20it%E2%80%99s%20good%20to%20add%20alt-text%20for%20images%2C%20but%20many%20people%20aren%E2%80%99t%20aware%20of%20what%20exactly%20you%20should%20put%20in%20alt-text%2C%E2%80%9D%20she%20says.%20%E2%80%9CI%20took%20the%20%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Flearn%2Fpaths%2Faccessibility-fundamentals%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EAccessibility%20fundamentals%20courses%3C%2FA%3E%20in%20Docs.microsoft.com%20and%20learned%20for%20the%20first%20time%20about%20the%20accessibility%20checker%20in%20PowerPoint.%20I%20am%20still%20working%20through%20all%20of%20my%20PowerPoint%20slide%20decks%20to%20make%20sure%20that%20they%20are%20more%20accessible!%E2%80%9D%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EEnsuring%20accessibility%20is%20an%20ongoing%20process%2C%20and%20Susan%20shares%20the%20following%20three%20tips%20in%20making%20SharePoint%20pages%20and%20news%20accessible%20to%20all.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EFirst%2C%20write%20content%20%E2%80%9Cupside%20down.%E2%80%9D%20People%20scan%20web%20pages%2C%20they%20don%E2%80%99t%20read%20them%2C%20Susan%20says.%20To%20make%20pages%20more%20%E2%80%9Cscannable%E2%80%9D%20for%20all%20readers%2C%20put%20the%20key%20information%20that%20readers%20must%20have%20to%20be%20successful%20at%20the%20top%20of%20the%20page.%20Try%20to%20write%20more%20like%20a%20journalist%20with%20the%20key%20points%20early%20on%20the%20page%20and%20less%20critical%20information%20next.%20Put%20your%20conclusion%20first%2C%20instead%20of%20at%20the%20end.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ESecond%2C%20make%20sure%20all%20images%20have%20%3CA%20href%3D%22https%3A%2F%2Fnam06.safelinks.protection.outlook.com%2F%3Furl%3Dhttps%253A%252F%252Fwebaim.org%252Ftechniques%252Falttext%252F%26amp%3Bdata%3D04%257C01%257CRochelle.Sonnenberg%2540microsoft.com%257C6805857813b046c8d6ba08d8a5cbbb1d%257C72f988bf86f141af91ab2d7cd011db47%257C1%257C0%257C637441641729651133%257CUnknown%257CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%253D%257C1000%26amp%3Bsdata%3DACfoF72lhoE2E8RQicbWgxM68G45GvfdkjTR1QZya48%253D%26amp%3Breserved%3D0%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3E%E2%80%98alt%20text.%E2%80%99%3C%2FA%3E%20Susan%20notes%20that%20all%20images%20and%20graphics%20need%20alternative%20text%20descriptions%20that%20allow%20people%20who%20use%20a%20screen%20reader%20to%20understand%20what%20they%20represent.%20Alt%20text%20also%20shows%20in%20browsers%20when%20images%20don%E2%80%99t%20load%2C%20so%20it%20is%20helpful%20for%20slow%20internet%20connections%20as%20well.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThird%2C%20Susan%20suggests%20using%20%3CA%20href%3D%22https%3A%2F%2Fnam06.safelinks.protection.outlook.com%2F%3Furl%3Dhttps%253A%252F%252Fsupport.microsoft.com%252Fen-us%252Foffice%252Fkeyboard-shortcuts-in-sharepoint-online-466e33ee-613b-4f47-96bb-1c20f20b1015%26amp%3Bdata%3D04%257C01%257CRochelle.Sonnenberg%2540microsoft.com%257C6805857813b046c8d6ba08d8a5cbbb1d%257C72f988bf86f141af91ab2d7cd011db47%257C1%257C0%257C637441641729651133%257CUnknown%257CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%253D%257C1000%26amp%3Bsdata%3DS6T9OnrRM4Yv8Fzem56TkEV%252BHpAHEfm2Qhj4v8EEM%252Bc%253D%26amp%3Breserved%3D0%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3Eheadings%20to%20make%20pages%20easy%20to%20navigate%3C%2FA%3E.%20This%20means%20using%20the%20built-in%20H1%2C%20H2%2C%20and%20H3%20styles%20in%20text%20web%20parts.%20This%20allows%20readers%20to%20jump%20from%20section%20to%20section%20using%20keyboard%20shortcuts%20such%20as%20the%20Tab%20key.%20Heading%20styles%20also%20allow%20for%20the%20creation%20of%20%E2%80%9Ctable%20of%20contents%E2%80%9D%20for%20pages%20using%20page%20anchors%20(bookmarks).%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EFor%20more%20tips%2C%20check%20out%20Susan%E2%80%99s%20article%20on%20Sharepoint%20accessibility%20on%20the%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fhumans-of-it-blog%2Fguest-blog-8-tips-to-create-accessible-sharepoint-pages%2Fba-p%2F1338062%22%20target%3D%22_blank%22%3EHumans%20of%20IT%20Blog.%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CBR%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22Sue.jpg%22%20style%3D%22width%3A%20300px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F246991i2DF1979B4E72748C%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20role%3D%22button%22%20title%3D%22Sue.jpg%22%20alt%3D%22Sue.jpg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%20data-unlink%3D%22true%22%3E%3CEM%3EImage%3A%26nbsp%3BOffice%20Apps%20%26amp%3B%20Services%20MVP%20Sue%20Hanley%20and%20her%20granddaughter.%3C%2FEM%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-TEASER%20id%3D%22lingo-teaser-2067695%22%20slang%3D%22en-US%22%3E%3CP%20data-unlink%3D%22true%22%3E%3CSTRONG%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22Sue.jpg%22%20style%3D%22width%3A%20749px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F246990i0CF9AEE52D1A08A8%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22Sue.jpg%22%20alt%3D%22Sue.jpg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FSTRONG%3E%3C%2FP%3E%3CP%20data-unlink%3D%22true%22%3E%3CSTRONG%3EThere%20remains%20an%20accessibility%20awareness%20gap%20for%20information%20architects%20and%20business%20analysts%2C%20says%26nbsp%3BMVP%20Susan%20Hanley.%26nbsp%3B%3C%2FSTRONG%3E%3C%2FP%3E%3C%2FLINGO-TEASER%3E%3CLINGO-LABS%20id%3D%22lingo-labs-2067695%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EBits%20and%20Bytes%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Version history
Last update:
‎Jan 16 2021 12:48 PM
Updated by: