update documentation for scroll button alt text in carousels

[Nanbob]

Ticket: https://bbc.atlassian.net/browse/WCDS-597

Changes

• Added guidance around alt text labelling within the carousel documentation
• This should align with the description/explanation in the ticket
• Included a reference to alt text labelling

Impact
GEL documentation includes information on how best to approach alt text

Testing

• Tested locally via gulp watch and going to http://localhost:3000/components/carousels/
• Can see the updated guidance:

Click here for the section on alt labelling

### Scroll button accessible labels

The previous and next buttons should provide alternative text[^3] that communicate what content will be brought into view when the button is activated. Rather than simply announcing "Previous" or "Next", the label should include the item or range of items that will become visible, along with the total number of items in the carousel.

Where multiple items will be visible after scrolling, the label should use the format "X to Y of Z", where X is the first visible item, Y is the last visible item, and Z is the total number of items in the carousel. For example:

• Previous, 1 to 3 of 10
• Next, 3 to 5 of 10

Where only a single item is visible at a time, the label should use the format "X of Z":

• Previous, 1 of 10
• Next, 3 of 10

These labels describe the destination state of the carousel; that is, the content that will be visible after the button has been activated, not the content that is currently visible. In the examples above, the carousel is assumed to be showing items 2–4 and scrolling one item at a time.

When the user is already at the beginning or end of the carousel, the respective disabled control may simply be labelled:

• Previous
• Next

The exact values will depend on the carousel's configuration, viewport size, and scrolling behaviour. Implementations that scroll multiple items at a time should follow the same pattern, calculating the appropriate destination range for each button.