Make our service blueprint example accessible and link to it from the svc blueprint method card

[MelissaBraxton]

Point of contact @MelissaBraxton

Timeline Does this need to happen in the next two weeks?

• [X] Yes
• [ ] No

How much time do you anticipate this work taking? About a week

Background We are publishing a new method card for Service Blueprinting! Here's the draft. We'd like to include a link to this high-level example that is currently in Mural here. This issue covers creating a web accessible version of the diagram, and adding it to theimages folder in the Methods repo so that we can link to it from the new Service Blueprint method card.

Acceptance criteria (we'll know we're done when…)

• [x] We have a web accessible version if the service blueprint example in the docs folder in the Methods repo.
• [x] The blueprint example image meets 508 accessibility requirements

Tasks

• [x] Make a web accessible version of the service blueprint example (could be a pdf or something else?)
• [x] PO review
• [x] Accessibility review

[sarahmhgov]

@MelissaBraxton - can you add me to the TTS workplace? I realized I seem to have visitor creds so I can only view (I guess haven't tried to do more than view in mural yet!)

[MelissaBraxton]

Actually, a TTS workspace admin will have to do it. Stay tuned!

[sarahmhgov]

alright! I made a pull request to add a pdf version to the image folder. @MelissaBraxton I assigned you as the reviewer.

[MelissaBraxton]

@sarahmhgov - I added a comment on the PR. I can access the pdf (yay!), but it doesn't appear to be accessible in the 508 sense. I realize now that my acceptance criteria re: "accessibility" may have been a bit vague, so I added an acceptance criteria that makes it more clear that we need a pdf that's 508 compliant. Sorry about that!

Some good resources: https://www.section508.gov/create/pdfs/ https://blog-nrrd.doi.gov/beyond-auto/

[sarahmhgov]

Ah! OK yes I see, honestly I was like "this seems like too easy a thing".

I'll see what I can do to tag etc to make it accessible.

[sarahmhgov]

blocked on waiting to get adobe acrobat on my computer (request approved)

[sarahmhgov]

Alas, was not able to make much progress on this given never got adobe running.

For whoever picks it up, my plan was to use this guidance: https://www.section508.gov/create/pdfs/training-videos/

This is also helpful: https://helpx.adobe.com/acrobat/using/creating-accessible-pdfs.html

[melchoyce]

Going to try to pick this up, pending an Acrobat Pro license.

One more reference: https://support.mural.co/en/articles/6162447-create-accessible-murals

[janelx]

I have Acrobat and can work on making this into a more accessible PDF. @jduss4 and I are looking into if it could be made available as accessible html too.

[janelx]

After some review and information having encountered this in a previous project, I don't believe PDF is the most accessible route for share the mural example. PDFs are notoriously difficult to navigate accessibly. Here are the steps for accessible PDFs as followed by EPA, beginning with identifying if a PDF is actually necessary.

@jduss4 and I recommend (1) presenting the mural example in a table that passes accessibility, (2) a narrative of what the diagram is presenting. This can be used as alt text or displayed below the table. (3) possibly: print screen version of the table. @MelissaBraxton will this work to meet the requirements?

[MelissaBraxton]

Works for me! Thanks for your putting your minds to this!

[janelx]

Currently the service blueprint example would be difficult to view on a mobile device or smaller screen size. @katefisher808 is it possible to have a truncated version of the service blueprint example? I can also help, if you don't have time. cc: @MelissaBraxton and @jduss4

[MelissaBraxton]

Thanks @janelx! @katefisher808, Janel, Jessica, and I chatted about the idea of reducing the number of columns to negate the need for scrolling. I'm thinking we can make the phases less granular / show fewer of them and still communicate the idea, and was eying removing "Get confirmation and total" and "leave the restaurant."

@janelx and @jduss4 - How many columns would we need to remove to avoid horizontal scrolling?

[janelx]

@MelissaBraxton i don't know the exact answer to this. I'm working on styling it this afternoon/tomorrow morning and will have a better idea then. Ideally, it'd be the fewest number of columns for the example to be useful. We can also include text such as, "this is just an example and an actual service blueprint may be longer or shorter depending on the service/part of service you are mapping".

[katefisher808]

Thank you! That all sounds good and makes sense to me. Happy to jump in to provide copy edits + refinements when it makes sense.

[katefisher808]

Update! I'm going to be outlining a slightly truncated version of the content in mural to share with Elisa and Melissa for quick review early next week, and then I'll hand over to Janel so we can update the blueprint page: https://federalist-67816181-8ac2-428b-bc4e-be2d38d8f3ea.sites.pages.cloud.gov/preview/18f/methods/service-blueprint/service-blueprint-example/ .

[ryanwoldatwork]

Consider referencing existing standards related to Process Modeling, like https://en.wikipedia.org/wiki/Business_Process_Model_and_Notation and https://demo.bpmn.io/.

The business should be able to ask questions of its Services, and having services modeled in data enables this; whereas visual artifacts do not, and also, tend not to be updated over time (which is a missed opportunity).

[katefisher808]

Oh this is great @ryanwoldatwork - I'm going to bring this up to the service design team about creating additional method cards, especially around process modeling.

[MelissaBraxton]

Yes, thanks @ryanwoldatwork! I'm a big fan of BPMN, and I've often wondered why it's not more commonly used/talked about here.

I agree w/ Kate that it'd be worth exploring as a new method card (rather than included or mentioned in the context of the service blueprint method, which is what this issue covers) as they're two very distinct approaches to representing process and have different goals and are used in different ways / for different outcomes.

[janelx]

Current branch: https://github.com/18F/methods/compare/main...service-blueprint

[katefisher808]

Thank you! I shared some updated copy + 18F icons with Janel to fit the page.

[janelx]

I think this table still needs a <caption> to describe what is being displayed. Does this work? "This is a table showing a service blueprint. The top row is the journey of someone ordering and eating a burger at a restaurant. The remaining rows describe different parts of the service and the support provided along the customer’s journey." @katefisher808 @MelissaBraxton

[MelissaBraxton]

Great start! I made a few tweaks below. While I generally don't think the word "customer" is the best choice for our public service design work, I think it makes the most sense in this burger ordering example.

This is a table showing an example service blueprint. The top row is the journey of a customer ordering and eating a burger at a restaurant. Each column is a different step in the customer's journey. The remaining rows describe different parts of the service and the support provided at each step in the customer’s journey.

[MelissaBraxton]

I like the idea of the styling being in line with the Method cards, but I have accessibility concerns w/ the horizontal scrolling. We truncated the content to avoid having to scroll, but scrolling is still required with this implementation.

I think avoiding the horizontal scroll takes priority over applying the template. Can we try tweaking the template to eliminate the need to scroll?

[janelx]

@MelissaBraxton I will try to make it fit for desktop and above by adjusting spacing or making the white space wider.

I don't think there is a way to avoid the horizontal scroll for smaller screens and this is responsive solution for tables per USWDS. We truncated it so it'd be easier to navigate not really to avoid the horizontal scroll. I do think the background color is desirable to indicate that is scrollable.

[MelissaBraxton]

That sounds like a great plan! Thank you!

[janelx]

@MelissaBraxton this is ready for your review. As discussed I made a new issue specifically for design enhancements the table here.

@jduss4 reviewed the code and @jasnakai did an additional review for accessibility.

Here is the branch and preview. Let me know if you'd like me to create a pull request.

[MelissaBraxton]

This look great, @janelx! Thanks so much for all your work on it! (and thank you, @jduss4 and @jasnakai too!)

Please create a pull request, and I can review/merge.