アクセシビリティ
Jira 8.8 brings accessibility improvements, allowing you to enable underlined links or unique patterns on issue statuses. These settings are personal, so whatever you choose will be visible only by you.
To view your accessibility settings:
Click the user profile, and select Accessibility.
Adjusting your app to work with existing settings
If your app is using hyperlinks or status lozenges, we’d like you to adjust it to work with the new settings, so the user experience around Jira is unified.
Setting 1: Underlined links
Here’s how to make your hyperlinks underlined when this setting is enabled:
body.a11y-setting-underlined-links {
<Your CSS code for underlined links goes here>
}Setting 2: Patterns on issue statuses
Here’s how to add patterns to issue statuses:
Add a dependency like the one below to your app’s XML to indicate the use of patterns.
<web-resource key="your-plugin-web-resources"> ... <dependency>com.atlassian.plugins.issue-status-plugin:issue-status-resources</dependency> ... <resource type="download" name="your-app-styles.css" location="your-plugin-files/your-plugin-styles.css" /> ... </web-resource>Next, use the code like the one below in
your-plugin-styles.css:body.a11y-setting-issue-status-patterns { <Your CSS code for issue status patterns goes here> // Example: .element-you-want-to-have-pattern { background-position: center left; background-repeat: no-repeat; padding-left: 16px; // 16-20px depends on the size of the pattern } .element-you-want-to-have-pattern.to-do { background-image: var(--a11y-patterns-svg--gray-tiny); } .element-you-want-to-have-pattern.progress { background-image: var(--a11y-patterns-svg--blue-tiny); } .element-you-want-to-have-pattern.done { background-image: var(--a11y-patterns-svg--green-tiny); } }
Images for lozenges
We add patterns to status lozenges by adding an image on the lozenge. You can use variables to get our ready images.
Here’s what full variables look like, just to show you the width, height, and some extra details.
--a11y-patterns-svg--green-default: url("data:image/svg+xml,%3Csvg width='24' height='48' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath id='a' d='M0 0h24v48H0z'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cmask id='b' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3Crect fill='%23FFF' opacity='.8' mask='url(%23b)' y='12' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.6' mask='url(%23b)' x='6' y='18' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.8' mask='url(%23b)' y='24' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.5' mask='url(%23b)' x='12' y='12' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.4' mask='url(%23b)' x='18' y='18' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.8' mask='url(%23b)' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.6' mask='url(%23b)' x='6' y='6' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.5' mask='url(%23b)' x='12' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.4' mask='url(%23b)' x='18' y='6' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.6' mask='url(%23b)' x='6' y='30' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.4' mask='url(%23b)' x='18' y='30' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.6' mask='url(%23b)' x='6' y='42' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.4' mask='url(%23b)' x='18' y='42' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.5' mask='url(%23b)' x='12' y='24' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.8' mask='url(%23b)' y='36' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.5' mask='url(%23b)' x='12' y='36' width='6' height='6' rx='1'/%3E%3C/g%3E%3C/svg%3E");
--a11y-patterns-svg--green-medium: url("data:image/svg+xml,%3Csvg width='20' height='48' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpath id='a' d='M0 0h24v48H0z'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cmask id='b' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3C/mask%3E%3Crect fill='%23FFF' opacity='.8' mask='url(%23b)' y='12' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.6' mask='url(%23b)' x='6' y='18' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.8' mask='url(%23b)' y='24' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.5' mask='url(%23b)' x='12' y='12' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.8' mask='url(%23b)' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.6' mask='url(%23b)' x='6' y='6' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.5' mask='url(%23b)' x='12' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.6' mask='url(%23b)' x='6' y='30' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.6' mask='url(%23b)' x='6' y='42' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.5' mask='url(%23b)' x='12' y='24' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.8' mask='url(%23b)' y='36' width='6' height='6' rx='1'/%3E%3Crect fill='%23FFF' opacity='.5' mask='url(%23b)' x='12' y='36' width='6' height='6' rx='1'/%3E%3C/g%3E%3C/svg%3E");
--a11y-patterns-svg--green-tiny-inverted: url("data:image/svg+xml,%3Csvg width='12' height='42' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%2300875A' fill-rule='evenodd'%3E%3Crect opacity='.8' y='18' width='6' height='6' rx='1'/%3E%3Crect opacity='.6' x='6' y='24' width='6' height='6' rx='1'/%3E%3Crect opacity='.8' y='30' width='6' height='6' rx='1'/%3E%3Crect opacity='.8' y='6' width='6' height='6' rx='1'/%3E%3Crect opacity='.6' x='6' y='12' width='6' height='6' rx='1'/%3E%3Crect opacity='.6' x='6' width='6' height='6' rx='1'/%3E%3Crect opacity='.6' x='6' y='36' width='6' height='6' rx='1'/%3E%3C/g%3E%3C/svg%3E");
--a11y-patterns-svg--green-tiny: url("data:image/svg+xml,%3Csvg width='12' height='42' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23FFF' fill-rule='evenodd'%3E%3Crect opacity='.8' y='6' width='6' height='6' rx='1'/%3E%3Crect opacity='.6' x='6' y='12' width='6' height='6' rx='1'/%3E%3Crect opacity='.8' y='18' width='6' height='6' rx='1'/%3E%3Crect opacity='.6' x='6' width='6' height='6' rx='1'/%3E%3Crect opacity='.6' x='6' y='24' width='6' height='6' rx='1'/%3E%3Crect opacity='.8' y='30' width='6' height='6' rx='1'/%3E%3Crect opacity='.8' x='6' y='36' width='6' height='6' rx='1'/%3E%3C/g%3E%3C/svg%3E");All the variables you need
Here’s the complete list of variables. Default, medium, and tiny are sizes (you can view the exact height and width in the snippet above), you’ll need to choose the right one for your lozenge.
--a11y-patterns-svg--gray-default
--a11y-patterns-svg--gray-medium
--a11y-patterns-svg--gray-tiny-inverted
--a11y-patterns-svg--gray-tiny 
--a11y-patterns-svg--blue-default
--a11y-patterns-svg--blue-medium
--a11y-patterns-svg--blue-tiny-inverted
--a11y-patterns-svg--blue-tiny
--a11y-patterns-svg--green-default
--a11y-patterns-svg--green-medium
--a11y-patterns-svg--green-tiny-inverted
--a11y-patterns-svg--green-tiny Adding new settings
Your app can also add new settings that would be displayed on the Accessibility page together with our default settings.
Here’s a snippet for underlined links, which you can use as an example:
<a11y-personal-setting key="underlined-links">
<label key="jira.a11y.personal.settings.underlined-links.label"/>
<description key="jira.a11y.personal.settings.underlined-links.description"/>
<image module-complete-key="${atlassian.plugin.key}:a11y-personal-settings-images"
resource-name="a11y-settings-preview-links.png"
alternate-text-key="jira.a11y.personal.settings.underlined-links.image.alt.text"/>
</a11y-personal-setting>Label key (mandatory): Name of your setting, that’s the one in bold.
Description (mandatory): Brief description of your setting, displayed below the label.
Image (optional): Image showing an example of what your setting does. It will be displayed after clicking Show me. If you use an image tag then alternate text for it is mandatory.
Providing an example image
Adding an image with an example is optional, but it might be helpful if your setting is not straightforward. To add an image, you’ll need to specify a web resource.
Here’s the snippet we’re using for images for our default settings:
<web-resource key="a11y-personal-settings-images" name="Accessibility personal settings images">
<resource type="download" name="a11y-settings-preview-links.png" location="images/a11y-settings-preview-links.png" />
<resource type="download" name="a11y-settings-preview-patterns.png" location="images/a11y-settings-preview-patterns.png" />
</web-resource>既知の問題
If there’s a problem with the contents of <image module-complete-key>, you won’t see any error but you’ll notice that your image is not being displayed. In such a case, enable DEBUG logging for class com.atlassian.jira.user.a11y to see the details of what went wrong.